import React, { Component } from 'react';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as cartActions from "../store_redux/actions/cart.actions";
import apple from '../apple.png';
class Item extends Component {
    render() {
        const { data, EAT_APPLE } = this.props;
        return (
            <div className="item-wrapper">
                <img src={ apple } className="apple-logo"></img>
                <div className="desc">
                    <h4>Red Apple - { data.id } </h4>
                    <h5> { data.weight } g</h5>
                </div>
                <div className="operation">
                    <button className="btn" onClick={ () => EAT_APPLE(data) }>Eat</button>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    items: state.cart.apples,
});

const mapDispatchToProps = (dispatch) => ({
    ...bindActionCreators(cartActions, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(Item);